import { withRouter } from "react-router-dom"
import React, { Component, useState, useRef ,useEffect} from 'react'
import './index.scss'
import { randomNum } from '../../utils/utils'
import { ajax } from '../../api';
import { reg } from "../../utils/validate"
import { Tabs, Form, Input, Button, Checkbox, Row, Col, message } from 'antd';
import { UserOutlined,EditOutlined ,LockOutlined, AppleOutlined, SafetyCertificateOutlined, PhoneOutlined, ExperimentOutlined, MessageOutlined } from '@ant-design/icons';
const { TabPane } = Tabs;
const { phoneReg, pwdReg } = reg;
export default class LoginCom extends Component {
    componentDidMount() {
        ajax.getToken()
            .then(res => {

            })
        var canvas = document.getElementById('canv')
        var num = 200;
        var w = window.innerWidth;
        var h = window.innerHeight;
        var max = 100;
        var _x = 0;
        var _y = 0;
        var _z = 150;
        var dtr = function (d) {
            return d * Math.PI / 180;
        };

        var rnd = function () {
            return Math.sin(Math.floor(Math.random() * 360) * Math.PI / 180);
        };
        var dist = function (p1, p2, p3) {
            return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2) + Math.pow(p2.z - p1.z, 2));
        };

        var cam = {
            obj: {
                x: _x,
                y: _y,
                z: _z
            },
            dest: {
                x: 0,
                y: 0,
                z: 1
            },
            dist: {
                x: 0,
                y: 0,
                z: 200
            },
            ang: {
                cplane: 0,
                splane: 0,
                ctheta: 0,
                stheta: 0
            },
            zoom: 1,
            disp: {
                x: w / 2,
                y: h / 2,
                z: 0
            },
            upd: function () {
                cam.dist.x = cam.dest.x - cam.obj.x;
                cam.dist.y = cam.dest.y - cam.obj.y;
                cam.dist.z = cam.dest.z - cam.obj.z;
                cam.ang.cplane = -cam.dist.z / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z);
                cam.ang.splane = cam.dist.x / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z);
                cam.ang.ctheta = Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z) / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.y * cam.dist.y + cam.dist.z * cam.dist.z);
                cam.ang.stheta = -cam.dist.y / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.y * cam.dist.y + cam.dist.z * cam.dist.z);
            }
        };

        var trans = {
            parts: {
                sz: function (p, sz) {
                    return {
                        x: p.x * sz.x,
                        y: p.y * sz.y,
                        z: p.z * sz.z
                    };
                },
                rot: {
                    x: function (p, rot) {
                        return {
                            x: p.x,
                            y: p.y * Math.cos(dtr(rot.x)) - p.z * Math.sin(dtr(rot.x)),
                            z: p.y * Math.sin(dtr(rot.x)) + p.z * Math.cos(dtr(rot.x))
                        };
                    },
                    y: function (p, rot) {
                        return {
                            x: p.x * Math.cos(dtr(rot.y)) + p.z * Math.sin(dtr(rot.y)),
                            y: p.y,
                            z: -p.x * Math.sin(dtr(rot.y)) + p.z * Math.cos(dtr(rot.y))
                        };
                    },
                    z: function (p, rot) {
                        return {
                            x: p.x * Math.cos(dtr(rot.z)) - p.y * Math.sin(dtr(rot.z)),
                            y: p.x * Math.sin(dtr(rot.z)) + p.y * Math.cos(dtr(rot.z)),
                            z: p.z
                        };
                    }
                },
                pos: function (p, pos) {
                    return {
                        x: p.x + pos.x,
                        y: p.y + pos.y,
                        z: p.z + pos.z
                    };
                }
            },
            pov: {
                plane: function (p) {
                    return {
                        x: p.x * cam.ang.cplane + p.z * cam.ang.splane,
                        y: p.y,
                        z: p.x * -cam.ang.splane + p.z * cam.ang.cplane
                    };
                },
                theta: function (p) {
                    return {
                        x: p.x,
                        y: p.y * cam.ang.ctheta - p.z * cam.ang.stheta,
                        z: p.y * cam.ang.stheta + p.z * cam.ang.ctheta
                    };
                },
                set: function (p) {
                    return {
                        x: p.x - cam.obj.x,
                        y: p.y - cam.obj.y,
                        z: p.z - cam.obj.z
                    };
                }
            },
            persp: function (p) {
                return {
                    x: p.x * cam.dist.z / p.z * cam.zoom,
                    y: p.y * cam.dist.z / p.z * cam.zoom,
                    z: p.z * cam.zoom,
                    p: cam.dist.z / p.z
                };
            },
            disp: function (p, disp) {
                return {
                    x: p.x + disp.x,
                    y: -p.y + disp.y,
                    z: p.z + disp.z,
                    p: p.p
                };
            },
            steps: function (_obj_, sz, rot, pos, disp) {
                var _args = trans.parts.sz(_obj_, sz);
                _args = trans.parts.rot.x(_args, rot);
                _args = trans.parts.rot.y(_args, rot);
                _args = trans.parts.rot.z(_args, rot);
                _args = trans.parts.pos(_args, pos);
                _args = trans.pov.plane(_args);
                _args = trans.pov.theta(_args);
                _args = trans.pov.set(_args);
                _args = trans.persp(_args);
                _args = trans.disp(_args, disp);
                return _args;
            }
        };

        (function () {
            "use strict";
            var threeD = function (param) {
                this.transIn = {};
                this.transOut = {};
                this.transIn.vtx = (param.vtx);
                this.transIn.sz = (param.sz);
                this.transIn.rot = (param.rot);
                this.transIn.pos = (param.pos);
            };

            threeD.prototype.vupd = function () {
                this.transOut = trans.steps(

                    this.transIn.vtx,
                    this.transIn.sz,
                    this.transIn.rot,
                    this.transIn.pos,
                    cam.disp
                );
            };

            var Build = function () {
                this.vel = 0.04;
                this.lim = 360;
                this.diff = 200;
                this.initPos = 100;
                this.toX = _x;
                this.toY = _y;
                this.go();
            };

            Build.prototype.go = function () {
                this.canvas = document.getElementById("canv");
                this.canvas.width = window.innerWidth;
                this.canvas.height = window.innerHeight;
                this.$ = canvas.getContext("2d");
                this.$.globalCompositeOperation = 'source-over';
                this.varr = [];
                this.dist = [];
                this.calc = [];

                for (var i = 0, len = num; i < len; i++) {
                    this.add();
                }

                this.rotObj = {
                    x: 0,
                    y: 0,
                    z: 0
                };
                this.objSz = {
                    x: w / 5,
                    y: h / 5,
                    z: w / 5
                };
            };

            Build.prototype.add = function () {
                this.varr.push(new threeD({
                    vtx: {
                        x: rnd(),
                        y: rnd(),
                        z: rnd()
                    },
                    sz: {
                        x: 0,
                        y: 0,
                        z: 0
                    },
                    rot: {
                        x: 20,
                        y: -20,
                        z: 0
                    },
                    pos: {
                        x: this.diff * Math.sin(360 * Math.random() * Math.PI / 180),
                        y: this.diff * Math.sin(360 * Math.random() * Math.PI / 180),
                        z: this.diff * Math.sin(360 * Math.random() * Math.PI / 180)
                    }
                }));
                this.calc.push({
                    x: 360 * Math.random(),
                    y: 360 * Math.random(),
                    z: 360 * Math.random()
                });
            };

            Build.prototype.upd = function () {
                cam.obj.x += (this.toX - cam.obj.x) * 0.05;
                cam.obj.y += (this.toY - cam.obj.y) * 0.05;
            };

            Build.prototype.draw = function () {
                this.$.clearRect(0, 0, this.canvas.width, this.canvas.height);
                cam.upd();
                this.rotObj.x += 0.1;
                this.rotObj.y += 0.1;
                this.rotObj.z += 0.1;

                for (var i = 0; i < this.varr.length; i++) {
                    for (var val in this.calc[i]) {
                        if (this.calc[i].hasOwnProperty(val)) {
                            this.calc[i][val] += this.vel;
                            if (this.calc[i][val] > this.lim) this.calc[i][val] = 0;
                        }
                    }

                    this.varr[i].transIn.pos = {
                        x: this.diff * Math.cos(this.calc[i].x * Math.PI / 180),
                        y: this.diff * Math.sin(this.calc[i].y * Math.PI / 180),
                        z: this.diff * Math.sin(this.calc[i].z * Math.PI / 180)
                    };
                    this.varr[i].transIn.rot = this.rotObj;
                    this.varr[i].transIn.sz = this.objSz;
                    this.varr[i].vupd();
                    if (this.varr[i].transOut.p < 0) continue;
                    var g = this.$.createRadialGradient(this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p, this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p * 2);
                    this.$.globalCompositeOperation = 'lighter';
                    g.addColorStop(0, 'hsla(255, 255%, 255%, 1)');
                    g.addColorStop(.5, 'hsla(' + (i + 2) + ',85%, 40%,1)');
                    g.addColorStop(1, 'hsla(' + (i) + ',85%, 40%,.5)');
                    this.$.fillStyle = g;
                    this.$.beginPath();
                    this.$.arc(this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p * 2, 0, Math.PI * 2, false);
                    this.$.fill();
                    this.$.closePath();
                }
            };
            Build.prototype.anim = function () {
                window.requestAnimationFrame = (function () {
                    return window.requestAnimationFrame ||
                        function (callback, element) {
                            window.setTimeout(callback, 1000 / 60);
                        };
                })();
                var anim = function () {
                    this.upd();
                    this.draw();
                    window.requestAnimationFrame(anim);
                }.bind(this);
                window.requestAnimationFrame(anim);
            };

            Build.prototype.run = function () {
                this.anim();

                window.addEventListener('mousemove', function (e) {
                    this.toX = (e.clientX - this.canvas.width / 2) * -0.8;
                    this.toY = (e.clientY - this.canvas.height / 2) * 0.8;
                }.bind(this));
                window.addEventListener('touchmove', function (e) {
                    e.preventDefault();
                    this.toX = (e.touches[0].clientX - this.canvas.width / 2) * -0.8;
                    this.toY = (e.touches[0].clientY - this.canvas.height / 2) * 0.8;
                }.bind(this));
                window.addEventListener('mousedown', function (e) {
                    for (var i = 0; i < 100; i++) {
                        this.add();
                    }
                }.bind(this));
                window.addEventListener('touchstart', function (e) {
                    e.preventDefault();
                    for (var i = 0; i < 100; i++) {
                        this.add();
                    }
                }.bind(this));
            };
            var app = new Build();
            app.run();
        })();
        window.addEventListener('resize', function () {
            canvas.width = w = window.innerWidth;
            canvas.height = h = window.innerHeight;
        }, false);
    }

    render() {
        return (
            <div>
                <canvas id="canv">
                </canvas>
                <div className="login-box">
                    <Tabs defaultActiveKey="1" >
                        <TabPane tab="密码登录" key="1">
                            <LoginByPassword></LoginByPassword>
                        </TabPane>
                        <TabPane tab="验证码登录" key="2">
                            <LoginByCaptcha history={this.props.history} ></LoginByCaptcha>
                        </TabPane>

                    </Tabs>
                </div>

            </div>
        )
    }
}
const layout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 15 },
}
const tailLayout = {
    wrapperCol: { offset: 4, span: 16 },
}

@withRouter
class LoginByPassword extends Component {
    componentDidMount() {
        if(localStorage.isAutoLogin){
            if(localStorage.userinfo){
                var userinfo = JSON.parse(localStorage.getItem('userinfo'))
                this.myform.setFieldsValue({...userinfo,remember:true})
            }
        }
        this.createCode()
    }
    onFinish = (value) => {
        console.log(value);
        this.myform.validateFields()
        .then(value=>{
            ajax.login(value)
            .then(res=>{
                if(res.code==200){
                    this.props.history.push("/main")
                    localStorage.setItem("userinfo",JSON.stringify(res.result)) 
                    localStorage.setItem("token",res.token)
                    value.remember ? localStorage.setItem("isAutoLogin",value.remember) : localStorage.setItem("isAutoLogin",'')
                }
            })
        })
    }
    onFinishFailed = ()=>{
        message.error('请输入有效的登录信息');
    }
    createCode = () => {
        const ctx = this.canvas.getContext('2d')
        const chars = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j', 'k', 'l', 'm', 'n', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
        let code = ''
        ctx.clearRect(0, 0, 80, 39)
        for (let i = 0; i < 4; i++) {
            const char = chars[randomNum(0, 57)]
            code += char
            ctx.font = randomNum(20, 25) + 'px SimHei'  //设置字体随机大小
            ctx.fillStyle = '#D3D7F7'
            ctx.textBaseline = 'middle'
            ctx.shadowOffsetX = randomNum(-3, 3)
            ctx.shadowOffsetY = randomNum(-3, 3)
            ctx.shadowBlur = randomNum(-3, 3)
            ctx.shadowColor = 'rgba(0, 0, 0, 0.3)'
            let x = 80 / 5 * (i + 1)
            let y = 39 / 2
            let deg = randomNum(-25, 25)
            /**设置旋转角度和坐标原点**/
            ctx.translate(x, y)
            ctx.rotate(deg * Math.PI / 180)
            ctx.fillText(char, 0, 0)
            /**恢复旋转角度和坐标原点**/
            ctx.rotate(-deg * Math.PI / 180)
            ctx.translate(-x, -y)
        }
        this.setState({
            code
        })
    }
    render() {
        return (
            <div>
                <Form
                    {...layout}
                    name="login"
                    initialValues={{ remember: false }}
                    onFinish={this.onFinish}
                    onFinishFailed={this.onFinishFailed}
                    ref={el=>this.myform=el}
                >
                    <Form.Item
                        label="手机号"
                        name="phone"
                        rules={[{ required: true, message: 'Please input your phone!' },
                        {
                            pattern: phoneReg, message: '请输入正确格式的手机号码'
                        }
                    ]}
                    >
                        <Input prefix={<PhoneOutlined className="site-form-item-icon" />} placeholder="请输入你的手机号码"/>
                    </Form.Item>

                    <Form.Item
                        label="密码"
                        name="password"
                        rules={[{ required: true, message: 'Please input your password!' },
                        {
                            pattern: pwdReg, message: '6-16位数字加字母'
                        }
                    ]}
                    >
                        <Input.Password prefix={<LockOutlined className="site-form-item-icon" />} placeholder="请输入你的密码"/>
                    </Form.Item>

                    <Form.Item
                        label="验证码"
                        name="Verification"
                        className='Verification'
                        rules={[
                            {
                                required: true,
                                message: '请输入验证码',
                            },
                            {
                                validator: (rule, value, callback) => {
                                    if (this.state.code.toUpperCase() !== value.toUpperCase()) {
                                        callback('验证码错误')
                                    }
                                    callback()
                                }
                            }
                        ]}
                    >
                        <Row>
                            <Col span={15}>
                                <Input
                                    maxLength={4}
                                    placeholder='验证码'
                                    prefix={<SafetyCertificateOutlined className="site-form-item-icon" />}
                                />
                            </Col>
                            <Col span={9}>
                                <canvas onClick={this.createCode} width="80" height='39' ref={el => this.canvas = el} />
                            </Col>
                        </Row>
                    </Form.Item>


                    <Form.Item {...tailLayout} name="remember" valuePropName="checked">
                        <Checkbox>记住密码</Checkbox>
                    </Form.Item>


                    <Form.Item {...tailLayout}>
                        <Button type="primary" block htmlType="submit">
                            登录
        </Button>
                    </Form.Item>
                </Form>
            </div>
        )
    }
}

const layout2 = {
    labelCol: {
        span: 4
    },
    wrapperCol: {
        span: 16
    }
}
const tailLayout2 = {
    wrapperCol: { offset: 4, span: 16 },
};
function LoginByCaptcha({history}){
    const phoneVal = useRef()
    const canvas1= useRef()
    const [flag,setFlag] = useState(false)
    const [toggle,setToggle] = useState(false)
    let [code,setCode] = useState('')
    let [countnum,setCountnum] = useState(60)
    var phonenum = ''
    const createCode = () => {
        // console.log(canvas1.current);
        const ctx = canvas1.current.getContext('2d')
        const chars = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j', 'k', 'l', 'm', 'n', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
        let code1 = ''
        ctx.clearRect(0, 0, 80, 39)
        for (let i = 0; i < 4; i++) {
            const char = chars[randomNum(0, 57)]
            code1 += char
            ctx.font = randomNum(20, 25) + 'px SimHei'  //设置字体随机大小
            ctx.fillStyle = '#D3D7F7'
            ctx.textBaseline = 'middle'
            ctx.shadowOffsetX = randomNum(-3, 3)
            ctx.shadowOffsetY = randomNum(-3, 3)
            ctx.shadowBlur = randomNum(-3, 3)
            ctx.shadowColor = 'rgba(0, 0, 0, 0.3)'
            let x = 80 / 5 * (i + 1)
            let y = 39 / 2
            let deg = randomNum(-25, 25)
            /**设置旋转角度和坐标原点**/
            ctx.translate(x, y)
            ctx.rotate(deg * Math.PI / 180)
            ctx.fillText(char, 0, 0)
            /**恢复旋转角度和坐标原点**/
            ctx.rotate(-deg * Math.PI / 180)
            ctx.translate(-x, -y)
        }
        setCode(code1)
        
    }
    useEffect(() => {
        createCode()
    }, [])
    const onFinishFailed = ()=>{
        message.error('请输入有效的登录信息');
    }
    const onFinish = (value)=>{
        console.log(value);
        phoneVal.current.validateFields()
        .then(value=>{
            ajax.verifycaptcha(value)
            .then(res=>{
                if(res.code==200){
                    history.push("/main")
                    // localStorage.setItem("userinfo",JSON.stringify(res.result)) 
                    localStorage.setItem("token",res.token)
                }
            })
        })
    }
    const countdown = ()=>{
        sendcaptcha()
        setToggle(true)
        setFlag(false)
        let timer = setInterval(()=>{
            if(countnum>0){
                setCountnum(--countnum)
                setToggle(true);
            }else{
                clearInterval(timer)
                timer  = null
                setCountnum(60);
                setToggle(false);
                setFlag(true)
            }
        },1000)
    }
    const sendcaptcha = ()=>{
        phonenum = phoneVal.current.getFieldsValue('phone').phone
        ajax.sendcaptcha({phone:phonenum})
        .then(res=>{
            if(res.code==200){

            }
        })
    }
    const changePhone = ()=>{
        phonenum = phoneVal.current.getFieldsValue('phone').phone
        if(phoneReg.test(phonenum)){
            setFlag(true);
        }else{
            setFlag(false);
        }
    }
    return (
        <div>
            <Form
            ref={phoneVal}
            {...layout2}
            name="normal_login"
            className=" "
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
        >
            <Form.Item
             style={{marginTop:'20px'}}
                label="手机号"
                name="phone"
                rules={[{ required: true, message: '请输入你的手机号码' },
                {
                    pattern: phoneReg, message: '请输入正确格式的手机号码'
                }
                ]}
            >
                <Input onChange={changePhone} prefix={<PhoneOutlined className="site-form-item-icon" />} placeholder="请输入你的手机号码" />
            </Form.Item>
            <Form.Item
                style={{marginTop:'20px'}}
                label="验证码"
                name="captcha"
                rules={[{ required: true, message: '请输入验证码' }]}
            >

                <Row>
                    <Col span={15}>
                        <Input maxLength={4} prefix={<MessageOutlined className="site-form-item-icon" />} placeholder="请输入验证码" />
                    </Col>
                    <Col span={6} >
                        <Button onClick={countdown} disabled={!flag} type="danger">{toggle?countnum+'s':'点击发送'}</Button>
                    </Col>
                </Row>
            </Form.Item>
            <Form.Item
                        label="验证码"
                        name="Verification"
                        className='Verification'
                        rules={[
                            {
                                required: true,
                                message: '请输入验证码',
                            },
                            {
                                validator: (rule, value, callback) => {
                                    if (code.toUpperCase() !== value.toUpperCase()) {
                                        callback('验证码错误')
                                    }
                                    callback()
                                }
                            }
                        ]}
                    >
                        <Row>
                            <Col span={15}>
                                <Input
                                    maxLength={4}
                                    placeholder='验证码'
                                    prefix={<SafetyCertificateOutlined className="site-form-item-icon" />}
                                />
                            </Col>
                            <Col span={9}>
                                <canvas onClick={createCode} width="80" height='39' ref={canvas1} />
                            </Col>
                        </Row>
                    </Form.Item>

            <Form.Item {...tailLayout2}>
                <Button style={{ marginTop: 10 }} type="primary" block htmlType="submit" className="login-form-button">
                    立即登录
                </Button>
            </Form.Item>
        </Form>
        </div>
    )
 
}